<template>
  <div class="app-container">
    <div class="box-form-top">
      <el-button class="dangerButton" type="danger" @click="getInputFocus"
        >请点击后再扫码！</el-button
      >
      <div class="searchArea">
        <div class="textArea">订单号：</div>
        <div class="inputArea">
          <el-input
            ref="inputBatch"
            v-model="batchSearchNum"
            clearable
          ></el-input>
        </div>
        <el-button
          class="searchBtn"
          type="primary"
          icon="el-icon-search"
          style="margin-left: 50px"
          @click="search"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="box-form">
      <div class="infoArea">
        <div class="infoArea_text">
          <div class="infoArea_text_info">
            <div class="infoArea_text_info_content">
              订单号：{{
                batchSearchNum == null || batchSearchNum == ""
                  ? ""
                  : batchSearchNum
              }}
            </div>
            <div class="infoArea_text_info_content">
              产品：{{ defectData.length == 0 ? "" : defectData[0].productid }}
            </div>
            <div class="infoArea_text_info_content">
              设备：{{
                defectData.length == 0 ? "" : defectData[0].machinecode
              }}
            </div>
          </div>
          <div class="infoArea_search">
            <div class="infoArea_search_leftArea">
              <el-form
                size="mini"
                :inline="true"
                label-width="68px"
                ref="searchForm"
                :model="searchForm"
              >
                <el-row>
                  <el-col :span="12">
                    <el-form-item
                      label="卷号"
                      prop="reelnum"
                      label-width="70px"
                    >
                      <el-input
                        v-model="searchForm.reelnum"
                        placeholder="请输入卷号"
                        style="width: 100%"
                        clearable
                      /> </el-form-item
                  ></el-col>
                  <el-col :span="12">
                    <el-form-item
                      label="设备编号"
                      prop="reelnum"
                      label-width="70px"
                    >
                      <el-input
                        v-model="searchForm.machinecode"
                        placeholder="请输入设备编号"
                        style="width: 100%"
                        clearable
                      /> </el-form-item
                  ></el-col>
                </el-row>
                <el-row>
                  <el-col :span="12"
                    ><el-form-item
                      label="起始时间"
                      prop="startTime"
                      label-width="70px"
                    >
                      <el-date-picker
                        value-format="timestamp"
                        v-model="searchForm.startTime"
                        type="datetime"
                        placeholder="请选择起始时间"
                        align="right"
                        style="width: 92%"
                        :picker-options="pickerOptions"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12"
                    ><el-form-item
                      label="终止时间"
                      prop="endTime"
                      label-width="70px"
                    >
                      <el-date-picker
                        value-format="timestamp"
                        v-model="searchForm.endTime"
                        type="datetime"
                        placeholder="请选择终止时间"
                        align="right"
                        style="width: 92%"
                        :picker-options="pickerOptions"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
            <div class="infoArea_search_rightArea">
              <div style="display: flex">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="medium"
                  style="margin-left: 10px; width: 48%"
                  @click="search"
                  >搜索</el-button
                >
                <el-button
                  icon="el-icon-refresh"
                  size="medium"
                  style="margin-left: 10px; width: 48%"
                  @click="searchReset"
                  >重置</el-button
                >
              </div>
              <div style="margin-top: 12px">
                <!-- :disabled="!canMap" -->
                <el-button
                  icon="el-icon-location-information"
                  size="medium"
                  style="margin-left: 10px; width: 96.2%"
                  @click="openDefectMap"
                  type="primary"
                  plain
                  >瑕疵地图</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="infoArea_chart">
          <div v-if="defectData.length == 0">
            <el-empty :image-size="100" description="无图数据"></el-empty>
          </div>
          <div id="echart" class="chartArea"></div>
          <!-- <div id="echart" class="chartArea"></div> -->
        </div>
      </div>
      <div class="formArea">
        <!-- <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="(item, idx) in reelList"
              :key="idx"
              :index="(idx + 1).toString()"
              >卷号：{{ item.c }}</el-menu-item
            >
          </el-menu> -->
        <el-table
          :data="defectData"
          border
          style="width: 100%"
          :header-cell-style="{
            background: '#cfcfcf',
            height: '36px',
            color: '#000000',
          }"
          height="100%"
        >
          <template slot="empty">
            <div class="table_empty">
              <div class="empty_tips">
                <el-empty description="请选择订单号"></el-empty>
              </div>
            </div>
          </template>
          <el-table-column
            prop="cameraid"
            label="相机id"
            width="100"
            align="center"
            v-if="showColumn('cameraid')"
          >
          </el-table-column>
          <el-table-column
            prop="reelnum"
            label="卷号"
            width="50"
            align="center"
            v-if="showColumn('reelnum')"
          >
          </el-table-column>
          <el-table-column
            prop="hlength"
            label="标注框高度(毫米)"
            width="100"
            align="center"
            v-if="showColumn('hlength')"
          >
          </el-table-column>
          <el-table-column
            prop="vlength"
            label="标注框宽度(毫米)"
            width="100"
            align="center"
            v-if="showColumn('vlength')"
          >
          </el-table-column>
          <el-table-column
            prop="area"
            label="瑕疵面积(平方毫米)"
            width="100"
            align="center"
            v-if="showColumn('area')"
          >
          </el-table-column>
          <el-table-column
            prop="defecparamname"
            label="瑕疵名字"
            width="100"
            align="center"
            v-if="showColumn('defecparamname')"
          >
          </el-table-column>
          <el-table-column
            prop="defecparamconfidene"
            label="瑕疵置信度"
            width="100"
            align="center"
            v-if="showColumn('defecparamconfidene')"
          >
          </el-table-column>
          <el-table-column
            prop="date"
            label="瑕疵日期"
            width="120"
            align="center"
            v-if="showColumn('date')"
          >
            <template slot-scope="scope">
              {{ scope.row.date | timeFilter }}
            </template>
          </el-table-column>
          <el-table-column
            prop="xaxis"
            label="瑕疵x坐标"
            width="80"
            align="center"
            v-if="showColumn('xaxis')"
          >
          </el-table-column>
          <el-table-column
            prop="yaxis"
            label="瑕疵y坐标"
            width="80"
            align="center"
            v-if="showColumn('yaxis')"
          >
          </el-table-column>
          <el-table-column
            prop="imagename"
            label="瑕疵图片"
            width="80"
            align="center"
            v-if="showColumn('imagename')"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="showPic(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="formBottom">
          <el-pagination
            v-if="defectData.length != 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[20, 40, 60, 80]"
            :page-size="searchForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
          <el-button
            type="primary"
            round
            class="formBottom-btn"
            size="small"
            @click="openSelectColumn"
            >列显示</el-button
          >
        </div>
      </div>
    </div>
    <el-drawer
      :with-header="false"
      size="15%"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div class="drawerCheckBox">
        <div class="popoverCheckBoxArea">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 16px 0"></div>
          <el-checkbox-group
            size="medium"
            v-model="checkedColumns"
            @change="handleCheckedColumnsChange"
          >
            <el-checkbox
              style="margin-bottom: 10px; margin-left: 10px"
              v-for="column in columns"
              :label="column.value"
              :key="column.value"
              border
              >{{ column.text }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div class="popoverCheckBoxButton">
          <el-button size="medium" @click="canclePopover">取消</el-button>
          <el-button type="primary" size="medium" @click="confirmPopover"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!-- <div class="box-form-bottom"></div> -->

    <!-- 地图弹窗 -->
    <el-drawer
      title="地图弹窗"
      size="86%"
      :visible.sync="openMap"
      :direction="direction"
      @opened="opendrawer"
    >
      <div class="dialogWin">
        <div class="modelArea">
          <div class="modelArea_up">
            <div ref="cyMapTest" id="cyMap" class="cy"></div>
            <div class="cy_Area">
              <div
                style="
                  height: 10%;
                  width: 100%;
                  display: grid;
                  place-items: center;
                "
              >
                上边框： {{ extend.up }}（米）
              </div>
              <div
                style="
                  height: 80%;
                  width: 100%;
                  display: grid;
                  place-items: center;
                "
              >
                高度：{{ extend.height }}（米）
              </div>
              <div
                style="
                  width: 100%;
                  height: 10%;
                  display: grid;
                  place-items: center;
                "
              >
                下边框：{{ extend.down }}（米）
              </div>
            </div>
          </div>
          <div class="modelArea_down">
            <div
              style="
                height: 100%;
                width: 15%;
                display: grid;
                place-items: center;
              "
            >
              左边框：{{ extend.left }}（米）
            </div>
            <div
              style="
                height: 100%;
                width: 68%;
                display: grid;
                place-items: center;
              "
            >
              宽度：{{ extend.width }}（米）
            </div>
            <div
              style="
                height: 100%;
                width: 15%;
                display: grid;
                place-items: center;
              "
            >
              右边框：{{ extend.right }}（米）
            </div>
          </div>
        </div>
        <div class="rightArea">
          <div class="rightArea_Up">
            <el-form ref="searchForm" :model="searchForm" label-width="80px">
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="订单号" prop="batchnum">
                    <el-input
                      :disabled="true"
                      v-model="searchForm.batchnum"
                      placeholder="订单号"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="卷号" prop="reelnum">
                    <el-input v-model="searchForm.reelnum" placeholder="卷号">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="设备" prop="machinecode">
                    <el-input
                      v-model="searchForm.machinecode"
                      placeholder="设备"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                      value-format="timestamp"
                      v-model="searchForm.startTime"
                      type="datetime"
                      placeholder="请选择开始时间"
                      align="right"
                      style="width: 100%"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24"
                  ><el-form-item label="结束时间" prop="endTime">
                    <el-date-picker
                      value-format="timestamp"
                      v-model="searchForm.endTime"
                      type="datetime"
                      placeholder="请选择结束时间"
                      align="right"
                      style="width: 100%"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                type="primary"
                style="width: 100%"
                @click="loadMap"
                :loading="btnload"
                >加载数据</el-button
              >
            </div>
          </div>
          <div class="rightArea_Down">
            <div class="block">
              <span>瑕疵地图缩放</span>
              <el-slider
                v-model="zoomSilder"
                :show-tooltip="false"
                @change="zoomSilderChange"
              ></el-slider>
            </div>
            <div>
              <div>上下移动</div>
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-caret-top"
                  style="width: 48.5%"
                  @click="mapMove(0)"
                  >上移</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-caret-bottom"
                  style="width: 48.5%"
                  @click="mapMove(0)"
                  >下移</el-button
                >
              </div>
            </div>
            <div style="margin-top: 20px">
              <div style="margin-bottom: 8px">瑕疵种类筛选</div>
              <el-checkbox-group v-model="checkboxGroup1" size="small">
                <el-checkbox
                  class="checkBoxStyle"
                  :label="item"
                  border
                  v-for="(item, idx) in defectCategory"
                  :key="idx"
                ></el-checkbox>
              </el-checkbox-group>
              <el-button
                type="primary"
                style="width: 97%"
                @click="checkBoxChange"
                >确定</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- <el-dialog
        title="地图弹窗"
        :visible.sync="openMap"
        width="720px"
        append-to-body
      >
        <div class="modelArea">
          <div ref="cyMapTest" id="cyMap" class="cy"></div>
        </div>
      </el-dialog> -->

    <!-- 瑕疵图片 -->
    <el-dialog title="瑕疵图片" :visible.sync="openPic" width="36%">
      <el-image style="width: 100%; height: auto" :src="this.url"> </el-image>
      <!-- <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPic = false">确 定</el-button>
        </span> -->
    </el-dialog>
  </div>
</template>
      
            <script>
import * as api from "./api";
import moment from "moment";
import cytoscape from "cytoscape";

export default {
  name: "defectFormNew",
  components: {},
  data() {
    return {
      defectData: [],
      drawer: false, //表格列显示抽屉
      // checkedList: [], // 已选中、
      checkAll: true,
      isIndeterminate: true, // 全选状态  是否全选
      checkedColumns: [],
      // checkIngList: [], // 暂存全部选中s
      columns: [
        { text: "相机id", value: "cameraid", show: true },
        { text: "卷号", value: "reelnum", show: true },
        { text: "标注框高度(毫米)", value: "hlength", show: true },
        { text: "标注框宽度(毫米)", value: "vlength", show: true },
        { text: "瑕疵面积(平方毫米)", value: "area", show: true },
        { text: "瑕疵名字", value: "defecparamname", show: true },
        { text: "瑕疵置信度", value: "defecparamconfidene", show: true },
        { text: "瑕疵日期", value: "date", show: true },
        { text: "瑕疵x坐标", value: "xaxis", show: true },
        { text: "瑕疵y坐标", value: "yaxis", show: true },
        { text: "瑕疵图片", value: "imagename", show: true },
      ],
      //条件搜索
      searchForm: {
        startTime: "",
        endTime: "",
        batchnum: "",
        reelnum: "",
        machinecode: "",
        page: 1,
        limit: 20,
      },
      isSearch: false,
      //时间选择
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },

      holeList: [],
      batchSearchNum: null, //订单号搜索值
      reelList: [],
      currentReel: 1,
      activeIndex: "1",

      //瑕疵地图
      openMap: false,
      fullscreenLoading: false,
      direction: "rtl",
      canMap: false,
      btnload: false,
      center: {}, //中心点
      copyNodes: [],
      nodes: [
        {
          data: {
            id: "n0",
          },
        },
        {
          data: {
            id: "n1",
          },
        },
        {
          data: {
            id: "n2",
          },
        },
        {
          data: {
            id: "n3",
          },
        },
      ],
      edges: [
        {
          data: {
            source: "n2",
            target: "n1",
          },
        },
        {
          data: {
            source: "n2",
            target: "n3",
          },
        },
        {
          data: {
            source: "n2",
            target: "n0",
          },
        },
        {
          data: {
            source: "n1",
            target: "n0",
          },
        },
        {
          data: {
            source: "n0",
            target: "n1",
          },
        },
      ],
      options: {
        name: "preset",
        positions: undefined, // map of (node id) => (position obj); or function(node){ return somPos; }
        zoom: 0.75, // the zoom level to set (prob want fit = false if set)
        pan: { x: 0, y: 20 }, // the pan level to set (prob want fit = false if set)
        fit: false, // whether to fit to viewport
        padding: 30, // padding on fit
        animate: false, // whether to transition the node positions
        animationDuration: 500, // duration of animation in ms if enabled
        animationEasing: undefined, // easing of animation if enabled
        animateFilter: function (node, i) {
          return true;
        }, // a function that determines whether the node should be animated.  All nodes animated by default on animate enabled.  Non-animated nodes are positioned immediately when the layout starts
        ready: undefined, // callback on layoutready
        stop: undefined, // callback on layoutstop
        transform: function (node, position) {
          return position;
        }, // transform a given node position. Useful for changing flow direction in discrete layouts
      },
      zoomSilder: 37.5, //瑕疵地图缩放
      defectCategory: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ],
      checkboxGroup1: [
        "烂胶",
        "气泡",
        "布毛",
        "凹痕",
        "色线",
        "褶皱",
        "停机印",
        "驳口",
        "针板孔",
        "布接头",
      ], //筛选瑕疵
      mapZoom: 3,
      //瑕疵样式
      style: {},
      //地图位置大小
      extend: {
        height: null,
        width: null,
        up: null,
        down: null,
        left: null,
        right: null,
      },

      //echart柱状图参数
      nameData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], //横坐标名称
      categoryCounts: [120, 200, 150, 80, 70, 110, 130], //柱状图数据

      //分页参数
      currentPage4: 1,
      total: null,
      //getlist请求参数
      param: {
        page: 1,
        limit: 20,
      },
      // 图片详情弹窗
      openPic: false,
      // 图片url
      url: "",
    };
  },
  watch: {},
  methods: {
    reset() {
      this.defectDataForm = {
        ETID: null,
        ETCODE: "",
        ETNAME: "",
      };
    },
    //分页
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.limit = val;
      this.searchForm.limit = val;
      this.defectData = [];
      let searchParam = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        batchnum: this.batchSearchNum,
        reelnum: this.searchForm.reelnum,
        page: this.searchForm.page,
        limit: this.searchForm.limit,
      };
      api.defectDataFilterGetList(searchParam).then((res) => {
        console.log(res.data);
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        this.total = res.data.total;
      });
      // api.defectDataBatchFilterGetList(searchParam).then((res) => {
      //   this.holeList = res.data;
      //   res.data.data[this.currentReel - 1].forEach((element) => {
      //     this.defectData.push(element);
      //   });
      //   this.total = res.data.categoryList[this.currentReel - 1].s;
      // });
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.page = val;
      this.searchForm.page = val;
      this.defectData = [];
      let searchParam = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        batchnum: this.batchSearchNum,
        reelnum: this.searchForm.reelnum,
        page: this.searchForm.page,
        limit: this.searchForm.limit,
      };
      api.defectDataFilterGetList(searchParam).then((res) => {
        console.log(res.data);
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        this.total = res.data.total;
      });
    },
    /* 表格筛选 条件选择 */
    openSelectColumn() {
      this.drawer = true;
      this.checkedColumns = [];
      this.columns.map((item) => {
        if (item.show) {
          this.checkedColumns.push(item.value);
        }
      });
      // 如果目前展示的是全部字段，则需要勾选上“全选”按钮
      if (this.columns.length == this.checkedColumns.length) {
        this.checkAll = true;
        this.isIndeterminate = false;
      }
      // // 重新渲染表格
      // this.$nextTick(() => {
      //   this.$refs.multipleTable.doLayout();
      // });
    },
    canclePopover() {
      this.drawer = false;
      // this.$refs.tablePopover.doClose();
    },
    handleCheckedColumnsChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.columns.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.columns.length;
    },
    // /* 表格筛选 条件全选 */
    handleCheckAllChange(val) {
      let columnsValueList = [];
      this.columns.map((item) => columnsValueList.push(item.value));
      this.checkedColumns = val ? columnsValueList : [];
      this.isIndeterminate = false;
    },
    showColumn(currentColumn) {
      return this.columns.find((item) => item.value == currentColumn).show;
    },
    confirmPopover() {
      if (this.checkedColumns.length == 0) {
        this.$message({
          message: "请选择需要展示的表格字段",
          center: true,
          customClass: "message-error",
        });
        return;
      }
      // 根据选择结果，遍历修改列是否展示的属性值
      this.columns.forEach((item) => {
        if (this.checkedColumns.some((el) => el == item.value)) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
      this.drawer = false;
      // this.$refs.tablePopover.doClose();
      // // 重新渲染表格
      // this.$nextTick(() => {
      //   this.$refs.multipleTable.doLayout();
      // });
    },
    /////
    getInputFocus() {
      this.$refs.inputBatch.focus();
    },
    // searchBatch() {
    //   if (this.batchSearchNum == null || this.batchSearchNum == "") {
    //     this.$message({
    //       message: "请先输入订单号",
    //       type: "warning",
    //     });
    //     return;
    //   }
    //   this.defectData = [];
    //   let searchParam = {
    //     batchnum: this.batchSearchNum,
    //     page: this.searchForm.page,
    //     limit: this.searchForm.limit,
    //   };
    //   api.defectDataBatchFilterGetList(searchParam).then((res) => {
    //     console.log(res.data);
    //     this.reelList = res.data.categoryList;
    //     this.holeList = res.data;
    //     res.data.data[0].forEach((element) => {
    //       this.defectData.push(element);
    //     });
    //     this.total = res.data.categoryList[0].s;
    //     this.chartDataDeal();
    //     this.getLoadEcharts();
    //   });
    // },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.currentReel = key;
      this.defectData = [];
      if (this.holeList.data[key - 1].length == 0) {
        this.searchForm.page = 1;
        this.defectData = [];
        let searchParam = {
          batchnum: this.batchSearchNum,
          page: this.searchForm.page,
          limit: this.searchForm.limit,
        };
        api.defectDataBatchFilterGetList(searchParam).then((res) => {
          this.holeList = res.data;
          res.data.data[this.currentReel - 1].forEach((element) => {
            this.defectData.push(element);
          });
          this.total = res.data.categoryList[this.currentReel - 1].s;
        });
      } else {
        this.holeList.data[key - 1].forEach((element) => {
          this.defectData.push(element);
        });
        this.total = this.holeList.categoryList[key - 1].s;
        this.chartDataDeal();
        this.getLoadEcharts();
      }
    },
    search() {
      if (this.batchSearchNum == null || this.batchSearchNum == "") {
        this.$message({
          message: "请先输入订单号",
          type: "warning",
        });
        return;
      }
      this.searchForm.batchnum = this.batchSearchNum;
      this.querydefectDataWithOptions();
    },
    querydefectDataWithOptions() {
      this.defectData = [];
      this.nameData = [];
      this.categoryCounts = [];
      let searchParam = {
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        batchnum: this.batchSearchNum,
        reelnum: this.searchForm.reelnum,
        page: this.searchForm.page,
        machinecode: this.searchForm.machinecode,
        limit: this.searchForm.limit,
      };
      // console.log(searchParam.machinecode)
      api.defectDataFilterGetList(searchParam).then((res) => {
        res.data.data.forEach((element) => {
          this.defectData.push(element);
        });
        res.data.category.forEach((ele) => {
          this.nameData.push(ele.defecparamname);
          this.categoryCounts.push(ele.count);
        });
        this.total = res.data.total;
        // console.log(this.searchForm.reelnum);
        if (
          !(
            (this.searchForm.reelnum == null ||
              this.searchForm.reelnum == "") &&
            (this.batchSearchNum == null || this.batchSearchNum == "")
          )
        ) {
          this.canMap = true;
        }
        if (this.defectData.length == 0) {
          this.$message({
            message: "瑕疵数据为空",
            type: "warning",
          });
          return;
        }
        this.chartDataDeal();
        this.getLoadEcharts();
      });
    },
    searchReset() {
      this.searchForm = {
        startTime: "",
        endTime: "",
        batchnum: this.batchSearchNum,
        reelnum: "",
        page: 1,
        limit: 20,
      };
    },
    chartDataDeal() {},
    openDefectMap() {
      // let param = {
      //   batchnum: this.batchSearchNum,
      //   reelnum: this.searchForm.reelnum,
      //   startTime: this.searchForm.startTime,
      //   endTime: this.searchForm.endTime,
      // };
      // api.defectMapFilter(param).then((res) => {
      //   console.log(res.data);
      //   this.nodes = [];
      //   this.edges = [];
      //   res.data.data.forEach((element) => {
      //     this.defectStyle(element.defecparamname);
      //     this.nodes.push({
      //       data: {
      //         id: element.dataId,
      //         defecparamname: element.defecparamname,
      //       },
      //       style: this.style,
      //       position: {
      //         x: parseFloat(element.xaxis),
      //         y: parseFloat(element.yaxis),
      //       },
      //     });
      //   });
      //   loading.close();
      //   this.openMap = true;
      //   // this.createCytoscape();
      // });
      if (this.batchSearchNum == null || this.batchSearchNum == "") {
        this.$message({
          message: "请先输入订单号",
          type: "warning",
        });
        return;
      }
      this.openMap = true;
    },
    loadMap() {
      this.btnload = true;
      let param = {
        batchnum: this.searchForm.batchnum,
        reelnum: this.searchForm.reelnum,
        startTime: this.searchForm.startTime,
        endTime: this.searchForm.endTime,
        machinecode: this.searchForm.machinecode,
      };
      if (param.batchnum == "" || param.batchnum == null) {
        this.$message({
          message: "订单号未选择",
          type: "info",
        });
        this.btnload = false;
        return;
      }
      this.$message({
        message: "加载数据中，请稍等",
        type: "success",
      });
      api.defectMapFilter(param).then((res) => {
        // console.log(res.data);
        this.nodes = [];
        this.edges = [];
        res.data.data.forEach((element) => {
          this.defectStyle(element.defecparamname);
          this.nodes.push({
            data: {
              id: element.dataId,
              defecparamname: element.defecparamname,
            },
            style: this.style,
            position: {
              x: parseFloat(element.xaxis),
              y: parseFloat(element.yaxis),
            },
          });
        });
        this.copyNodes = this.nodes;
        this.btnload = false;
        // console.log(this.nodes);
        this.options.pan = { x: 0, y: 20 };
        this.createCytoscape();
      });
    },
    opendrawer() {
      // console.log("123",document.getElementById("cyMap"))
      // this.createCytoscape();
    },
    defectStyle(str) {
      this.style = {};
      if (str.indexOf("烂胶") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("气泡") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布毛") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("凹痕") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "star",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("色线") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("褶皱") !== -1) {
        this.style = {
          "background-color": "red",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("停机印") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("驳口") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "round-rectangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("针板孔") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "triangle",
          width: "35",
          height: "35",
        };
      } else if (str.indexOf("布接头") !== -1) {
        this.style = {
          "background-color": "green",
          shape: "ellipse",
          width: "35",
          height: "35",
        };
      } else {
        this.style = {};
        console.log("str", str);
      }
    },

    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById("echart"));
      var option = {
        grid: {
          top: "10%",
          left: "3%", //默认10%
          right: "4%", //默认10%
          bottom: "3%", //默认60
          containLabel: true,
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: "category",
          data: this.nameData,
          axisLabel: {
            interval: 0,
            rotate: 30,
            margin: 10,
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.categoryCounts,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      myChart.setOption(option);
    },

    createCytoscape() {
      cytoscape.warnings(false);
      const cy = cytoscape({
        container: document.getElementById("cyMap"),
        autolock: true,
        zoomingEnabled: true,
        panningEnabled: true,
        userPanningEnabled: true,
        boxSelectionEnabled: true,
        userZoomingEnabled: false, //滚轮缩放
        wheelSensitivity: 0.1,
        autounselectify: true,
        autoungrabify: false,
        minZoom: 0.01,
        style: [
          {
            selector: "node",
            style: {
              content: "data(defecparamname)",
              "text-opacity": 0.5,
              height: 20,
              width: 20,
              shape: "round-rectangle",
              "pie-size": "100%",
              "text-valign": "center",
              "text-halign": "center",

              "pie-1-background-color": "#E8747C",
              "pie-1-background-size": "mapData(occupy, 0, 10, 0, 100)",
            },
          },
          {
            selector: ":parent",
            css: {
              "text-valign": "top",
              "text-halign": "center",
            },
          },
        ],
        elements: {
          //节点数据
          nodes: this.nodes,
          edges: this.edges,
        },
        layout: this.options,
      });
      //右键单击节点
      cy.on("cxttap", "node", (e) => {
        // console.log(e);
        const nodePosition = e.target._private.position;
        const test = cy.extent();
        console.log("当前中心点坐标:", test);
        console.log("Center Node Position:", nodePosition);

        // 设置视口中心点为选定节点的位置
        // cy.panBy({
        //   x: cy.width() / 2 - nodePosition.x,
        //   y: cy.height() / 2 - nodePosition.y,
        // });
      });
      //拖动节点
      cy.on("mouseup", "node", (e) => {});
      cy.on("pan", (event) => {
        const test = cy.extent();
        // const currentCenter = cy.pan(); // 获取当前中心点坐标
        // this.options.pan.y = currentCenter.y;
        // console.log("当前中心点坐标:", currentCenter);
        // 获取选定节点的位置
        this.extend.height = (cy.extent().h / 1000).toFixed(2);
        this.extend.width = (cy.extent().w / 1000).toFixed(2);
        this.extend.up = (cy.extent().y1 / 1000).toFixed(2);
        this.extend.down = (cy.extent().y2 / 1000).toFixed(2);
        this.extend.left = (cy.extent().x1 / 1000).toFixed(2);
        this.extend.right = (cy.extent().x2 / 1000).toFixed(2);
      });
      this.extend.height = (cy.extent().h / 1000).toFixed(2);
      this.extend.width = (cy.extent().w / 1000).toFixed(2);
      this.extend.up = (cy.extent().y1 / 1000).toFixed(2);
      this.extend.down = (cy.extent().y2 / 1000).toFixed(2);
      this.extend.left = (cy.extent().x1 / 1000).toFixed(2);
      this.extend.right = (cy.extent().x2 / 1000).toFixed(2);
    },

    //瑕疵地图缩放
    zoomSilderChange() {
      if (this.zoomSilder == 0) {
        this.zoomSilder += 1;
      }
      this.options.zoom = this.zoomSilder / 50;
      this.createCytoscape();
    },
    //瑕疵地图移动
    mapMove(row) {
      if (row == 0) {
        this.options.pan.y -= 100;
      } else {
        this.options.pan.y += 100;
      }
      this.createCytoscape();
    },
    checkBoxChange() {
      console.log(this.checkboxGroup1);
      let arr = [];
      this.copyNodes.forEach((item) => {
        if (
          this.checkboxGroup1.some((ele) =>
            item.data.defecparamname.includes(ele)
          )
        ) {
          arr.push(item);
        }
      });
      this.nodes = arr;
      this.createCytoscape();
    },
    // 图片详情
    showPic(row) {
      this.openPic = true;
      var str = row.imagepath + row.imagename;
      this.url = api.defectImageUrl(str);
      console.log(this.url);
    },
  },
  filters: {
    timeFilter(val) {
      return moment(val * 1).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  mounted() {
    // this.querydefectDataWithOptions();
    this.$refs.inputBatch.focus();
    // this.getLoadEcharts();
    // console.log(this.$refs.cyMapTest);
  },
};
</script>
      
  <style scoped lang="scss">
.app-container {
  //padding: 20px;
  min-height: 250px;
  padding: 10px 10px 0px 5px;
  margin-right: auto;
  margin-left: auto;
}
.box-form-top {
  height: 10%;
  text-align: center;
  line-height: 100%;
  border-top: 0;
  margin-bottom: 5px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: flex;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  .dangerButton {
    width: 20%;
    height: 100%;
    font-size: 18px;
  }
  .searchArea {
    display: flex;
    align-items: center;
    text-align: center;
    width: 70%;
    height: 100%;
    // font-size: 18px;
    .textArea {
      margin-left: 30px;
      height: 100%;
      width: 12%;
      display: grid;
      place-items: center;
      font-size: 21px;
    }
    .inputArea {
      width: 80%;
      height: 100%;
    }
    .searchBtn {
      width: 12%;
      height: 100%;
      font-size: 18px;
    }
  }
}
.box-form {
  height: 80vh;
  align-items: center;
  position: relative;
  border-top: 0;
  margin-bottom: 10px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: block;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  overflow: auto;

  .emptyBox {
    height: 100%;
    width: 100%;
    align-items: center;
  }
  .infoArea {
    width: 100%;
    height: 29%;
    display: flex;

    .infoArea_text {
      height: 100%;
      width: 60%;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      position: relative;
      .infoArea_text_info {
        width: 100%;
        height: 100%;
        padding: 10px;
        display: block;
        align-items: center;
        .infoArea_text_info_content {
          margin-top: 3px;
          font-size: 18px;
        }
      }
      .infoArea_search {
        width: 100%;
        height: 50%;
        text-align: center;
        display: flex;
        padding: 5px;
        padding-top: 14px;
        border-top: 1px solid #dce3e6;
        position: absolute;
        bottom: 0;
        .infoArea_search_leftArea {
          margin-left: 0px;
          display: block;
          align-items: center;
          width: 72%;
          height: 100%;
          //   border: 2px solid #dce3e6;
        }
        .infoArea_search_rightArea {
          margin-left: 16px;
          display: block;
          align-items: center;
          width: 28%;
          height: 100%;
          //   border: 2px solid #dce3e6;
        }
      }
    }
    .infoArea_chart {
      margin-left: 8px;
      height: 100%;
      width: 40%;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      .chartArea {
        height: 100%;
        width: 100%;
      }
    }
  }
  .formArea {
    margin-top: 7px;
    width: 100%;
    height: 66%;

    .formBottom {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
      .formBottom-btn {
        height: 10%;
        width: 10%;
      }
    }
  }
}

.box-form-bottom {
  position: relative;
  height: 5vh;
  border-top: 0;
  margin-bottom: 15px;
  width: 100%;
  background: #fff;
  border-radius: 0;
  padding: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  border: 1px solid #dce3e6;
  border-radius: 4px;
  -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
}

.dialogWin {
  // padding-left: 10px;
  padding-right: 10px;
  display: flex;
  height: 100%;
  width: 100%;

  .modelArea {
    position: relative;
    border-top: 0;
    margin-bottom: 12px;
    // width: 1220px;
    width: 74%;
    // height: 94%;
    background: #fff;
    border-radius: 0;
    padding: 10px;
    border: 1px solid #dce3e6;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
    margin-left: 20px;
    .modelArea_up {
      display: flex;
      width: 100%;
      height: 95%;
      .cy {
        width: 93.5%;
        height: 100%;
        background-color: #b7ffff;
      }
      .cy_Area {
        position: relative;
        margin-left: 8px;
        width: 5%;
        height: 100%;
        // border: 1px solid #dce3e6;
      }
    }
    .modelArea_down {
      display: flex;
      margin-top: 4px;
      height: 4%;
      width: 94.9%;
      // border: 1px solid #dce3e6;
    }
  }
  .rightArea {
    display: block;
    height: 100%;
    width: 24%;
    .rightArea_Up {
      position: relative;
      border-top: 0;
      margin-bottom: 12px;
      width: 100%;
      height: 44%;
      background: #fff;
      border-radius: 0;
      padding: 10px;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      margin-left: 10px;
    }
    .rightArea_Down {
      position: relative;
      border-top: 0;
      margin-bottom: 12px;
      width: 100%;
      height: 53.3%;
      background: #fff;
      border-radius: 0;
      padding: 10px;
      border: 1px solid #dce3e6;
      border-radius: 4px;
      -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
      margin-left: 10px;

      .checkBoxStyle {
        margin-bottom: 10px;
        margin-left: 10px;
        width: 38%;
      }
    }
  }
  .dialog-footer {
    width: 100%;
  }
}

// .modelArea {
//     position: relative;
//     border-top: 0;
//     margin-bottom: 12px;
//     width: 100%;
//     height: 600px;
//     background: #fff;
//     border-radius: 0;
//     padding: 10px;
//     border: 1px solid #dce3e6;
//     border-radius: 4px;
//     -webkit-box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
//     box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.05);
//     margin-left: 20px;
//     .cy {
//       width: 100%;
//       height: 100%;
//     }
//   }
.drawerCheckBox {
  .popoverCheckBoxArea {
    padding: 10px 20px 10px 20px;
    margin-bottom: 10px;
    // max-height: 600px;
    // overflow-y: auto;
    // overflow-x: hidden;
  }

  .popoverCheckBoxButton {
    text-align: center;
    padding-bottom: 10px;
  }
}

::v-deep .el-input__inner:focus {
  border: 3px solid red;
}
::v-deep .el-input__inner {
  height: auto;
  font-size: 18px;
}
.el-dialog__title {
  font-size: 25px;
}
</style>
      